<template>
	<view>
		<!-- 海报 -->
		<u-popup :show="hbshow" @close="hbclose" mode="center">
			<view class="mainpadding">

				<view class="flexleft">
					<view class="quxiaobtn flexcenter margin_right5">取消</view>
					<view class="baocbtn flexcenter">保存图片</view>
				</view>
			</view>
		</u-popup>
		<!-- 规格 -->
		<u-popup :show="show" @close="close">
			<view class="mainpadding ffffff">
				<view class="flexleft">
					<image class="biejt margin_right2" src="../static/images/system/bjc.png" mode=""></image>
					<view class="">
						<view class="bigtext fonweight xiaocheng ">¥98.00</view>
						<view class="ershil fonweight xiaohui margin_top">库存：32</view>
					</view>
				</view>
				<view class="margin_top4">
					<view class="ershil fonweight xiaohei ">选择规格</view>
					<view class="flexleft flex_wrap">
						<view class="yxbtn margin_top margin_right2" v-for="item in 3">规格一</view>
					</view>
				</view>
				<view class="margin_top4">
					<view class="ershil fonweight xiaohei ">重量</view>
					<view class="flexleft flex_wrap">
						<view class="wxbtn margin_top margin_right2" v-for="item in 3">250ml</view>
					</view>
				</view>
				<view class="flexbetween margin_top5">
					<view class="ershil fonweight xiaohei ">购买数量</view>
					<view class="jianbox flexbetween">
						<view class="" style="padding-left: 10rpx;">
							<u-icon name="minus" color="#B4B4B4" size="14"></u-icon>
						</view>
						<view class="biak"></view>
						<view class="titletext xiaocheng fonweight textcenter" style="width: 70rpx;">1</view>
						<view class="biak"></view>
						<view class="" style="padding-right: 10rpx;">
							<u-icon name="plus" color="#000" size="16"></u-icon>
						</view>
					</view>
				</view>
				<view class="bigbtn margin_top6" @click="tzqrdd">确定</view>
			</view>
		</u-popup>
		<view class="" style="padding-bottom: 180rpx;">
			<!-- 轮播 -->
			<u-swiper :list="list1" height="375" radius="0"></u-swiper>
			<!-- 商品信息 -->
			<view class="mainpadding ffffff radius margin_top">
				<view class="sanshier xiaohei">床上小桌子可折叠桌笔记本电脑桌书桌家用简易</view>
				<view class="margin_top ershiba xiaohong fonweight">￥
					<text class=" ershiba xiaohong fonweight" style="font-size: 48rpx;">165.00</text>
				</view>
			</view>
			<!--  -->
			<view class="ffffff mainpadding radius margin_top">
				<view class="tab_nav">
					<view class="navTitle" v-for="(item,index) in navList" :key="index">
						<view :class="{'active':isActive === index}" @click="checked(index)">
							{{item.title}}
						</view>
					</view>
				</view>
				<view class="" v-if="isActive==0">
					<u-parse :content="content"></u-parse>
				</view>
				<view class="" v-if="isActive==1">
					<view class="">
						<view class="zhonghei ershil ">有效期</view>
						<view class="xiaohui ershil margin_top2">·购买后90天内有效</view>
						<view class="zhonghei ershil margin_top">使用时间</view>
						<view class="xiaohui ershil margin_top2">·07:00-12:00</view>
						<view class="zhonghei ershil margin_top">预约信息</view>
						<view class="xiaohui ershil margin_top2">·无需预约，如遇消费高峰时段可能需要排队</view>
						<view class="zhonghei ershil margin_top">适用人数</view>
						<view class="xiaohui ershil margin_top2">·每张只能1人适用</view>
					</view>
				</view>
				<view class="" v-if="isActive==2">
					<view class=" flextop margin_top">
						<image class="touxiang margin_right2" src="../static/images/system/dh.png" mode=""></image>
						<view class="" style="width: 86%;">
							<view class="flexbetween">
								<view class="sanshier zhonghei">岁岁有年年</view>
								<view class="ershil xiaohui">2023.12.31</view>
							</view>
							<view class="flexleft margin_top1">
								<view class="margin_right1" v-for="item in 3">
									<u-icon name="star-fill" color="#FF9341" size="18"></u-icon>
								</view>
								<u-icon name="star" color="#999999" size="18"></u-icon>
							</view>
							<view class="ershil xiaohui margin_top2">
								环境优美，地理位置好，交通方便，房间舒适卫生，服务人员很热情，乐于提供各种帮助，早餐丰富。设施很人性化，网络高速信号好，窗外风景好。
							</view>
							<view class="flexleft margin_top">
								<view class="ershiw flexcenter" v-for="item in 4">
									<image class="tupian" src="../static/images/system/bjc.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="flexleft margin_top" @click="jumper('/pages_lianmengsc/quanbupj')">
						<view class="xiaocheng ershiba margin_right1 ">查看全部评价</view>
						<u-icon name="arrow-right" color="#FF9341"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="gudingdb ffffff mainpadding ">
			<view class="bigbtn" @click="tzzfym">立即抢购</view>	
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				show: false,
				closeable:true,
				hbshow: false,
				content: `
									<p>露从今夜白，月是故乡明</p>
									<img src="https://cdn.uviewui.com/uview/swiper/2.jpg" />
								`,
				list1: [
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				],
				isActive: 0,
				navList: [{
					index: 0,
					title: '团购详情'
				}, {
					index: 1,
					title: "购买须知"
				}, {
					index: 1,
					title: "评价列表"
				}]
			}
		},
		methods: {
			// 跳转支付页面
			tzzfym(){
				uni.navigateTo({
					url:'/pages_shouye/dingdanzf'
				})
			},
			// 海报
			hbclose() {
				this.hbshow = false
				// console.log('close');
			},
			// 规格
			close() {
				this.show = false
				// console.log('close');
			},
			checked(index) {
				this.isActive = index
			},
			jumper(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.ptbox{
		background-size: 100% 100%;
		padding: 16rpx 120rpx 16rpx 110rpx;
		background-image: url('https://kuaixun.yuntaiqikeji.com/uploads/20240131/53995b7d6254d57f94f0293232cafd1c.png');
	}
	.xiahuaxian:last-child{
		padding-bottom: 0;
		border: none;
	}
	.xhtbn {
		width: 140rpx;
		height: 55rpx;
		background-color: #FFf;
		border: 2rpx solid #FF9341;
		border-radius: 120rpx;
		font-size: 24rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
	}

	.touxiag {
		width: 73rpx;
		border-radius: 50%;
		height: 73rpx;

	}

	.touxiag:last-child {
		position: absolute;
		left: 40rpx;
		// bottom: 0;
		z-index: 0;
	}

	.baocbtn {
		width: 300rpx;
		height: 66rpx;
		background: #FF9341;
		border-radius: 102rpx 102rpx 102rpx 102rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.quxiaobtn {
		width: 300rpx;
		height: 66rpx;
		background: #FFFFFF;
		border-radius: 102rpx 102rpx 102rpx 102rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	/deep/.u-popup__content {
		background-color: rgba(0, 0, 0, .01) !important;
	}

	.tupian {
		width: 140rpx;
		height: 140rpx;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
	}

	.touxiang {
		width: 73rpx;
		height: 73rpx;
		border-radius: 50%;
	}

	.wxbtn {
		width: 147rpx;
		height: 53rpx;
		background: #F5F5F5;
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #666666;
		border: 2rpx solid #F5F5F5;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yxbtn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 147rpx;
		height: 53rpx;
		background: rgba(255, 147, 65, 0.1);
		border-radius: 27rpx 27rpx 27rpx 27rpx;
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
		border: 2rpx solid #FF9341;
	}

	.biejt {
		width: 134rpx;
		height: 134rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
	}

	.jianbox {
		width: 178rpx;
		height: 48rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		opacity: 1;
		border: 1rpx solid #D2D2D2;
	}

	.biak {
		width: 1rpx;
		height: 47rpx;
		background-color: #D2D2D2;
	}

	.shuz {
		position: absolute;
		top: -10rpx;
		right: -30rpx;
		font-size: 20rpx;
		font-family: DIN, DIN;
		font-weight: bold;
		color: #FFFFFF;
		width: 36rpx;
		height: 36rpx;
		background: #FA4C31;
		border-radius: 50rpx;
	}

	.gwbox {
		position: fixed;
		top: 56%;
		right: 30rpx;
		box-shadow: 0rpx 0rpx 11rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 50%;
		background-color: #fff;
		width: 94rpx;
		height: 94rpx;
	}

	.lbtn {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		height: 76rpx;
		background-color: #FF7510;
		width: 208rpx;
		border-radius: 0 45rpx 45rpx 0rpx;
	}

	.jrbtn {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		height: 76rpx;
		background-color: #FFB801;
		width: 208rpx;
		border-radius: 45rpx 0 0 45rpx;
	}

	.tab_nav {
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		padding-bottom: 11rpx;
	}

	.tab_nav .navTitle {
		height: 76rpx;
		line-height: 76rpx;
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		font-weight: bold;
		color: #999999;
	}

	.active {
		font-size: 30rpx;
		color: #333333;
		font-weight: bold;
		position: relative;
	}

	.active::after {
		content: "";
		position: absolute;
		width: 39rpx;
		height: 4rpx;
		background: #FFB800;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
		background-size: 100% 100%;
		left: 0rpx;
		right: 0rpx;
		bottom: 0rpx;
		margin: auto;
	}

	.huangbox {
		background-color: #fff5ec;
		padding: 4rpx 7rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FF9341;
	}

	.fenbox {
		background-color: #fff0ef;
		padding: 4rpx 7rpx;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-size: 22rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		color: #FB605C;
	}
</style>